import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { AppstoreOutlined, DatabaseOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { useLocation, useNavigate, Routes, Route, Navigate } from 'react-router-dom';
import PromptTemplateManager from '../pages/PromptTemplateManager';
import TemplateEdit from '../pages/TemplateEdit';
import SceneTemplateManager from '../pages/SceneTemplateManager';

const { Sider, Content } = Layout;

const menuItems = [
  { key: '/prompt-template-manager', icon: <AppstoreOutlined />, label: '提示词模版管理' },
  { key: '/scene-template-manager', icon: <DatabaseOutlined />, label: '场景模版管理' },
];

const MainLayout: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: '100vh', overflow: 'hidden' }}>
      <Sider 
        width={200} 
        style={{ 
          background: '#fff',
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          top: 0,
          bottom: 0
        }}
        collapsible
        collapsed={collapsed}
        trigger={null}
      >
        <div style={{ 
          height: 40, 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center', 
          fontWeight: 700, 
          fontSize: 16, 
          letterSpacing: 2,
          padding: '0 8px',
          textAlign: 'center',
          lineHeight: 1.2,
          color: '#1890ff'
        }}>
          {collapsed ? (
            <img 
              src="/favicon.ico" 
              alt="logo" 
              style={{ 
                width: 24, 
                height: 24,
                objectFit: 'contain'
              }} 
            />
          ) : '蜗牛AI助手管理端'}
        </div>
        <Menu
          mode="inline"
          selectedKeys={[menuItems.find(item => location.pathname.startsWith(item.key))?.key || '/prompt-template-manager']}
          style={{ height: 'calc(100% - 40px)', borderRight: 0 }}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
        />
      </Sider>
      <Layout style={{ marginLeft: collapsed ? 80 : 200, transition: 'all 0.2s' }}>
        <div 
          style={{ 
            background: '#fff', 
            padding: '0 8px', 
            display: 'flex', 
            alignItems: 'center',
            height: 40,
            borderBottom: '1px solid #f0f0f0',
            position: 'sticky',
            top: 0,
            zIndex: 1
          }}
        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            style: { fontSize: 16, cursor: 'pointer' },
            onClick: () => setCollapsed(!collapsed),
          })}
        </div>
        <Content style={{ 
          margin: 0, 
          background: '#f5f6fa',
          minHeight: 'calc(100vh - 40px)',
          overflow: 'auto'
        }}>
          <Routes>
            <Route path="/prompt-template-manager" element={<PromptTemplateManager />} />
            <Route path="/template-edit" element={<TemplateEdit />} />
            <Route path="/template-edit/:id" element={<TemplateEdit />} />
            <Route path="/scene-template-manager" element={<SceneTemplateManager />} />
            <Route path="*" element={<Navigate to="/prompt-template-manager" replace />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout; 